<script setup>
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'

// 海报元素的引用，用于后续操作DOM
const posterRef = ref(null);

// 控制海报是否显示
const posterIsShow = ref(false);

// 存储最终生成的海报图片URL
const pictureImage = ref('');

// 海报的JSON配置，包含CSS样式和视图层次结构
const posterJson = ref({
  css: {
    width: '750rpx',
    paddingBottom: '40rpx',
    background: 'linear-gradient(,#000 0%, #ff5000 100%)'
  },
  views: [ // 这里配置了多个视图元素，包括图片、文本和容器，每个都有自己的CSS样式
    {
      src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
      type: 'image',
      css: {
        background: '#fff',
        objectFit: 'cover',
        marginLeft: '40rpx',
        marginTop: '40rpx',
        width: '84rpx',
        border: '2rpx solid #fff',
        boxSizing: 'border-box',
        height: '84rpx',
        borderRadius: '50%'
      }
    },
    {
      type: 'view',
      css: {
        marginTop: '40rpx',
        paddingLeft: '20rpx',
        display: 'inline-block'
      },
      views: [
        {
          text: '隔壁老王2',
          type: 'text',
          css: {
            display: 'block',
            paddingBottom: '10rpx',
            color: '#fff',
            fontSize: '32rpx',
            fontWeight: 'bold'
          }
        },
        {
          text: '为您挑选了一个好物',
          type: 'text',
          css: {
            color: 'rgba(255,255,255,.7)',
            fontSize: '24rpx'
          }
        }
      ]
    },
    {
      css: {
        marginLeft: '40rpx',
        marginTop: '30rpx',
        padding: '32rpx',
        boxSizing: 'border-box',
        background: '#fff',
        borderRadius: '16rpx',
        width: '670rpx',
        boxShadow: '0 20rpx 58rpx rgba(0,0,0,.15)'
      },
      views: [
        {
          src: 'https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg',
          type: 'image',
          css: {
            objectFit: 'cover',
            objectPosition: '50% 50%',
            width: '606rpx',
            height: '606rpx'
          }
        },
        {
          css: {
            marginTop: '32rpx',
            color: '#FF0000',
            fontWeight: 'bold',
            fontSize: '28rpx',
            lineHeight: '1em'
          },
          views: [
            {
              text: '￥',
              type: 'text',
              css: {
                verticalAlign: 'bottom'
              }
            },
            {
              text: '39',
              type: 'text',
              css: {
                verticalAlign: 'bottom',
                fontSize: '58rpx'
              }
            },
            {
              text: '.39',
              type: 'text',
              css: {
                verticalAlign: 'bottom'
              }
            },
            {
              text: '￥59.99',
              type: 'text',
              css: {
                verticalAlign: 'bottom',
                paddingLeft: '10rpx',
                fontWeight: 'normal',
                textDecoration: 'line-through',
                color: '#999999'
              }
            }
          ],

          type: 'view'
        },
        {
          css: {
            marginTop: '30rpx',
            fontSize: '26rpx',
            color: '#8c5400'
          },
          views: [
            {
              text: '满100减11',
              type: 'text',
              css: {
                color: '#ff6200',
                border: '1rpx solid #ff6200',
                padding: '10rpx 16rpx 4rpx 16rpx',
                fontSize: '24rpx'
              }
            }
          ],

          type: 'view'
        },
        {
          css: {
            marginTop: '10rpx'
          },
          views: [
            {
              text: '360儿童电话手表9X 智能语音问答定位支付手表 4G全网通20米游泳级防水视频通话拍照手表男女孩星空蓝',
              type: 'text',
              css: {
                paddingRight: '32rpx',
                marginTop: '16rpx',
                boxSizing: 'border-box',
                lineClamp: 2,
                color: '#333333',
                lineHeight: '48rpx',
                fontSize: '30rpx',
                width: '478rpx'
              }
            },
            {
              text: 'limeui.qcoon.cn',
              type: 'qrcode',
              css: {
                width: '128rpx',
                height: '128rpx'
              }
            }
          ],
          type: 'view'
        }
      ],
      type: 'view'
    }
  ]
});

/**
 * 绘制海报成功的回调函数
 * @param {string} e 生成的海报图片数据URL
 * @summary 绘制海报成功后，将海报显示出来，并隐藏加载提示。
 */
const painterSsuccess = (e) => {
  console.log('painterSsuccess');
  posterIsShow.value = true;
  pictureImage.value = e;
  uni.hideLoading()
};
const renderPoster = () => {
  posterRef.value.render(posterJson.value);
}
onLoad(() => {
	uni.showLoading({
		title: '正在生成海报',
		icon: 'loading'
	})
  setTimeout(() => {
    // 需要延迟，不然会报错
    renderPoster();
  },1000)
})
const submitReport = () => {
  wx.reportEvent('wxdata_order_status', {
    spu_id: 'demo',
    spu_name: 'demo',
    price_original:100,
    price_current:100,
    sku_count:100 // 其他参数自行补全
  })
}
// 订单状态变化后，执行 submitReport 方法，注意 wxdata_order_status 需要跟后台配置一致
</script>

<template>
<!-- 显示图像的元素 -->
  <image :src="pictureImage" v-if="pictureImage" mode="widthFix" style="width: 700rpx"></image>
  <l-painter
      ref="posterRef"
      @success="painterSsuccess"
      isCanvasToTempFilePath
      performance
      path-type="url"
      custom-style="position: fixed; left: 200%"
  >
  </l-painter>
</template>

<style scoped>

</style>